<template>
    <div class="container">
      <!-- 顶部导航栏 -->
      <GeneralTopBar :showPosition="false"/>
      <main class="margin-20per">
        <!-- 侧栏导航 -->
        <aside>
          <ul>
            <li v-for="menu in menuList" :key="menu.name"
                :class="{'selected': currentMenu === menu.name}"
                @click="menuSelect(menu.name)"
            >
              <SymbolIcon :icon-class="menu.icon"/>
              <el-link  :href="menu.href">{{ menu.name }}</el-link>
            </li>
          </ul>
        </aside>
        <!-- 简历 -->
        <Resume :applicant_id="applicant_id"  />
      </main>
      <!-- 底部信息栏 -->
      <GeneralFooter />
    </div>
</template>

<script>
    import GeneralTopBar from "../../../components/GeneralTopBar.vue";
    import GeneralFooter from "../../../components/GeneralFooter.vue";
    import SymbolIcon from "@/components/SymbolIcon.vue";
    import Resume from "./widget/Resume.vue";
    export default {
        name: "ApplicantResume",
        components: {
            GeneralTopBar,
            GeneralFooter,
            SymbolIcon,
            Resume
        },
        created() {
            this.$store.commit("setLogin");
            this.getApplicantId();
        },
        data() {
            return {
                applicant_id: true,
                menuList: [
                    { icon: "el-icon-gerenzhongxin", name: "个人中心", href: "/applicant"},
                    { icon: "el-icon-jianli", name: "我的简历", href: "/applicant/resume"},
                    { icon: "el-icon-toudi", name: "投递职位", href: "/applicant/apply"},
                    { icon: "el-icon-mianshi", name: "我的面试", href: "/applicant/interview"},
                    { icon: "el-icon-shoucang", name: "职位收藏", href: "/applicant/collect"},
                    { icon: "el-icon-xiaoxi", name: "我的消息", href: "/applicant/message"},
                    { icon: "el-icon-shezhi", name: "账号设置", href: "/applicant/setting"}
                ],
                currentMenu: "我的简历",
            }
        },
        methods: {
            async getApplicantId() {
                // const res = await this.$axios.request({
                //     url: `/applicant/getId`,
                //     method: "get",
                //   params:{
                //       id:this.$store.state.login_id.id,
                //       // id:this.$store.state.login_id.id,
                //   }
                // });
                // console.log(res);
                // console.log(this.$store.state.login_id.id);
                // if(res.msg === "success") {
                //     this.applicant_id = res.data.applicant_id;
                // }
            },
            menuSelect(name) {
                this.currentMenu = name;
            },
        },
    }
</script>

<style lang="less" scoped>
    .el-link-active{
        transition: .3s;
        &:hover{
            color: @mainColor;
        }
        &:active{
            color: @activeColor;
        }
    }

    @mainColor: #5dd5c8;
    @activeColor: #00c2b3;
    @background: #fff;
    @fontColor: #414a60;
    @borderColor: #dcdfe6;

    main{
        padding-top: 30px;
        display: flex;
        aside{
            background: @background;
            width: 160px;
            height: fit-content;
            margin-right: 20px;
            flex-shrink: 0;
            ul li{
                font-size: 15px;
                height: 60px;
                line-height: 60px;
                position: relative;
                &.selected {
                    &::after{
                        content: "";
                        background: @activeColor;
                        width: 2px;
                        height: 18px;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    .el-link {
                        color: #00d7c6;
                    }
                }
                .icon{
                    font-size: 18px;
                    margin-left: 30px;
                    margin-right: 12px;
                }
                .el-link{
                    cursor: pointer;
                    color: @fontColor;
                    .el-link-active();
                }

            }
        }
        .resume-detail{
            flex: 1;
        }
    }
</style>